<template>
  <div>
    <div class="example" v-show="spinning">
      <a-spin :spinning="spinning" />
    </div>
    <div v-show="!spinning">
      <div style="margin-bottom: 10px">
        <a-button @click="save"> 保存 </a-button>
        <a-button
          type="primary"
          style="margin-left: 10px"
          @click="send"
         v-if="!record.processInstanceId"
        >
          流程发送
        </a-button>
      </div>

      <a-card
        style="width: 100%"
        :tab-list="cardList"
        :active-tab-key="activeKey"
        @tabChange="(key) => onTabChange(key, 'activeKey')"
      >
        <p v-show="activeKey === 'form'">
          <k-form-build
            ref="kfb"
            :value="jsonData"
            :dynamic-data="dynamicData"
            @change="handleChange"
          />
        </p>
        <p v-show="activeKey === 'flowchart'">
          <img style="max-width:100%" :src="imageUrl" alt="流程图" class="image">
        </p>
      </a-card>
    </div>
  </div>
</template>
<script>
import { saveOrUpdate } from '@/api/customize/vdata'
import axios from 'axios'
import AssignmentForm from '@/views/activiti/processTask/Assignment'
export default {
  // 声明当前子组件接收父组件传递的属性
  props: {
    record: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {
      spinning: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      jsonData: {},
      form_data: {},
      dynamicData: this.record.dynamicData,
      form: { id: '' },
      initStatus: false,
      cardList: [
        {
          key: 'form',
          tab: '表单',
        },
        {
          key: 'flowchart',
          tab: '流程图',
        },
      ],
      activeKey: 'form',
      imageUrl: '',
      hideFieldKey: '',
    }
  },
  mounted () {
    this.form = this.record
    // 查询菜单配置信息
    this.jsonData = JSON.parse(this.record.table_content)
    console.log("jsonData",this.record)
    // 查询流程图
    this.flowchart(this.record)
  },
  updated () {
    // 查询编辑项内容
    if (this.form.id != '' && this.form.id != undefined) {
      this.$refs.kfb.setData(this.form)
    } else {
      this.initStatus = true
    }
  },
  components: {
    AssignmentForm,
  },
  methods: {
        // 显示加载过渡
    showloading () {
      this.spinning = !this.spinning
    },
    save () {
      // 使用getData函数获取数据
      console.log(this.$refs.kfb.getData())
      this.$refs.kfb
        .getData()
        .then((values) => {
          for (const k in values) {
            if (Array.isArray(values[k]) && values[k].length > 0) {
              if (
                Object.prototype.toString.call(values[k][0]) ==
                '[object String]'
              ) {
                values[k] = values[k].join(',')
              } else if (
                Object.prototype.toString.call(values[k][0]) ==
                '[object Object]'
              ) {
                for (const j in values[k]) {
                  if (Array.isArray(values[k][j]) && values[k][j].length > 0) {
                    values[k][j] = values[k][j].join(',')
                  }
                }
              }
            }
          }
          saveOrUpdate({
            ...values,
            id: this.form.id,
            table_id: this.record.table_id,
            menu_id: this.record.menu_id,
            submitType: '1',
            hideFieldKey: '',
          }).then((response) => {
            this.$emit('finishResponse', response)
          })
        })
        .catch(() => {})
    },
    send () {
      const that = this
      const record = {
        processDefinitionKey: this.record.process_key,
        process_status: '0',
        taskId: '',
        processInstanceId: '',
      }
      this.$refs.kfb
        .getData()
        .then((values) => {
          for (const k in values) {
            if (Array.isArray(values[k]) && values[k].length > 0) {
              if (
                Object.prototype.toString.call(values[k][0]) ==
                '[object String]'
              ) {
                values[k] = values[k].join(',')
              } else if (
                Object.prototype.toString.call(values[k][0]) ==
                '[object Object]'
              ) {
                for (const j in values[k]) {
                  if (Array.isArray(values[k][j]) && values[k][j].length > 0) {
                    values[k][j] = values[k][j].join(',')
                  }
                }
              }
            }
          }
          this.$dialog(
            AssignmentForm,
            {
              record: { ...values, ...record },
              on: {

                complete (data, approve_opinion, skipNodes) {
                  that.showloading()
                  console.log('点击任务完成')
                  saveOrUpdate({
                    ...values,
                    id: that.form.id,
                    table_id: that.record.table_id,
                    menu_id: that.record.menu_id,
                    submitType: '2',
                    nodeData: data,
                    skipNodes: skipNodes,
                    approve_opinion: approve_opinion,
                    hideFieldKey: that.hideFieldKey,
                  }).then((response) => {
                    console.log('自定义表单流程发送')
                    that.$emit('finishResponse', response)
                  })
                },
                ok () {},
                cancel () {},
                close () {},
              },
            },
            // modal props
            {
              title: '任务办理',
              width: 800,
              centered: true,
              maskClosable: false,
              okText: '确定',
              cancelText: '取消',
              bodyStyle: {
                backgroundColor: '#f0f2f5',
                padding: '16px',
                border: '#FFFFFF 4px solid',
              },
            },
          )
          return true
        })
        .catch(() => {})
    },
    onCancel () {
      return new Promise((resolve) => {
        resolve(true)
      })
    },
    handleChange (value, key, record) {
      if (record.linkFieldSet != undefined) {
        record.linkFieldSet.forEach((item) => {
          if (item.linkField == value) {
            const hideLinkField = item.hideLinkField
            const showLinkField = item.showLinkField
            // console.log('***---')
            // console.log(hideLinkField)
            // console.log(showLinkField)
            if (hideLinkField != undefined) {
              this.$refs.kfb.hide(hideLinkField.split(','))
            }
            if (showLinkField != undefined) {
              this.$refs.kfb.enable(showLinkField.split(','))
            }
          }
        })
      }
    },
    // 切换tab
    onTabChange (key, activeKey) {
      this.activeKey = key
    },
    // 查询流程图
    flowchart (record) {
      this.visible = true
      axios({
        method: 'GET',
        url:
          process.env.VUE_APP_API_BASE_URL +
          '/activiti/processDefinition/readResource?procDefinitionKey=' +
          record.process_key,
        responseType: 'arraybuffer',
      })
        .then((res) => {
          return (
            'data:image/svg+xml;base64,' +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                '',
              ),
            )
          )
        })
        .then((res) => {
          this.imageUrl = res
        })
        .catch((e) => {
          if (e.toString().indexOf('429') !== -1) {
            this.$notification.warning({
              message: '请求超时,请稍后重试',
              description: '',
            })
          } else {
            this.$notification.warning({
              message: '获取流程图失败',
              description: '',
            })
          }
        })
    },
  },
}
</script>
<style scoped>
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
</style>
